<template>
  <div
    class="relative w-full h-full flex bg-[#3b8be7] font-[HYTieXianHei] box-border whitespace-nowrap justify-center items-center">
    <div class="w-1/4 h-full mr-1 flex">
      <div class="w-[60px] h-full flex justify-center items-center">
        <SvgIcon name="sewagePlant" :color="activeColor" :width="svgWidth" :height="svgHeight"></SvgIcon>
      </div>
      <div class="flex-1 h-full flex items-center">
        <span class="text-[white] font-[SweiFistLegCJKsc] text-[28px] md:max-[1200px]:text-[23px]">{{ title }}</span>
      </div>
    </div>
    <ul class="flex-1 h-full flex justify-center items-center gap-4 overflow-hidden ">
      <el-dropdown v-for="item in props.navItems" :key="item.label" placement="bottom-start" class="elDropdown"
        popper-class="popperClass">
        <div
          class="cursor-pointer hover:text-white active:text-white leading-[40px] text-[23px] font-sans font-extrabold sm:text-[20px] md:text-[18px] lg:text-[16px] xl:text-[20px]"
          @click="handleRouter(item)" :class="{
            'text-white border-white border-b-2': item.path === activePath,
          }">
          {{ item.label }}
        </div>
        <template #dropdown>
          <el-dropdown-menu v-if="item.children && item.children.length" slot="dropdown"
            style="max-height: 160px; overflow: auto;">
            <el-dropdown-item v-for="childItem in item.children" :key="childItem.label" :indexe="childItem.label">
              <div :class="{ 'text-[#409eff]': childItem.path === activePath }" @click="handleRouter(childItem)">{{
                childItem.label }}</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </ul>
    <div class="w-[50px] h-full flex justify-center items-center cursor-pointer">
      <SvgIcon name="close" :color="activeColor" @click="logoutClick"></SvgIcon>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const activeColor = ref("");
const svgWidth = ref("40px");
const svgHeight = ref("40px");

interface INavChild {
  label: string;
  path: string;
}

interface INavPath {
  path?: string;
  label: string;
  href?: string;
  children?: INavChild[];
}

interface IProps {
  navItems: Array<INavPath>;
  title: string;
}
const props = defineProps<IProps>();
const router = useRouter();
const route = useRoute();

const activePath = computed(() => route.path);

function handleRouter(item: INavPath | INavChild) {
  if (item.path) {
    router.push({
      path: item.path,
      replace: true,
    });
  } else if ("href" in item) {
    window.open(item.href);
  }
}

function logoutClick() {
  router.replace("/");
  localStorage.clear();
}
</script>
<style lang="scss" scoped>
.el-dropdown {
  color: #acd7dd;
  font-size: 20px;
}

.elDropdown .el-tooltip__trigger:focus-visible {
  outline: unset;
}
</style>
<style>
.el-dropdown__popper.el-popper .el-popper__arrow:before {
  border: none;
}

.el-popper.is-light,
.el-popper.is-light>.el-popper__arrow:before {
  background: transparent;
  /* display: none; */
}

.el-popper__arrow,
.el-popper__arrow:before {
  width: 0px;
  height: 0px;

  z-index: -1000;
}

.el-dropdown__popper.el-popper,
.el-dropdown__popper.el-popper .el-popper__arrow:before {
  border: none;
}
</style>
